<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, computed } from 'vue'
import HeaderCom from '@/components/Layout/PageHeader/HeaderCom.vue'
import AllLeft from '@/components/PermissionsModule/DealerAllLeft.vue'
import AllRight from '@/components/PermissionsModule/DealerAllRight.vue'
import TopCom from './layout/TopCom.vue'
import PriceDetailTable from '@/components/PermissionsModule/Dealer/components/PriceDetailTable.vue'
import { DEFAULT_TIMER } from '@/Utils/setting'
import { useDealerDataStore } from '@/stores/module/dealerData'

import PersonalBoard from './layout/PersonalBoard.vue'
const dealerDataStore = useDealerDataStore() // 创建store实例

let timer = null // 定时器

onMounted(() => {
  getAll()
})

onUnmounted(() => {
  clearInterval(timer)
})
const getAll = () => {
  // 第一次的时候调一遍
  dealerDataStore.getAll()
  // 之后每隔5秒调一次
  timer = setInterval(() => {
    dealerDataStore.getAll()
  }, DEFAULT_TIMER)
}
</script>

<template>
  <Layout :boxClassName="'dealer-box'">
    <template v-slot:header>
      <HeaderCom class-name="dealer-header" :show-fun="false" />
    </template>
    <template v-slot:top>
      <TopCom />
    </template>
    <template v-slot:left>
      <AllLeft />
    </template>
    <template v-slot:main>
      <PersonalBoard />
    </template>
    <template v-slot:right>
      <AllRight />
    </template>
    <template v-slot:footer>
      <PriceDetailTable />
    </template>
  </Layout>
</template>
